WebGL 顶点数据动态更新与状态机缓存
一句话结论：逐帧变化的顶点数据要用 bufferSubData 局部更新，而 WebGL 的全局状态机决定了“绑定、设置、绘制”的顺序不能颠倒。
顶点数据动态更新
是什么
顶点数据动态更新，是在缓冲对象创建之后修改其中部分或全部顶点数据的操作，主要接口是 bufferSubData。与之配套的是 DYNAMIC_DRAW 使用标记，用于提示驱动该缓冲会被反复写入。
解决什么问题
它解决每帧需要改变顶点位置的场景，例如粒子系统、动态折线、水面网格与可变形的布料。如果每帧都调用 bufferData 重新分配整个缓冲，会产生大量内存申请与数据拷贝，帧率随之下降。
为什么这样做
缓冲的存储在创建时就确定大小，重新分配意味着驱动要寻找新的显存块并复制数据。bufferSubData 直接写入已有区间，省去分配与整体拷贝；而使用标记让驱动提前知道这块存储会频繁写入，从而选择更合适的分配策略，避免把动态数据放进只读优化区域。
怎么用
JavaScript
// 初始化：按最大顶点数分配，标记为动态
const MAX_POINTS = 4096;
const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, MAX_POINTS * 3 * 4, gl.DYNAMIC_DRAW);
// 每帧只更新实际用到的区间
function updatePoints(points) {
const data = new Float32Array(points.length * 3);
for (let i = 0; i < points.length; i++) {
data[i * 3] = points[i].x;
data[i * 3 + 1] = points[i].y;
data[i * 3 + 2] = 0;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, data); // 仅写入前 data.length 个元素
gl.drawArrays(gl.POINTS, 0, points.length);
}
替代方案：顶点数很多且每帧全变时，用两块缓冲轮换（双缓冲），避免写入时 GPU 正在读取同一块存储。
常见坑
- 每帧改少量数据却整段重传 → 原因：未按区间精确更新 → 处理：用
bufferSubData(offset, data)限定范围 - 静态几何误用
DYNAMIC_DRAW→ 原因：复制粘贴模板代码 → 处理：静态数据用STATIC_DRAW - 更新后忘记重新绑定 → 原因：
bufferSubData作用于当前绑定缓冲 → 处理：更新前先bindBuffer - 更新缓冲区正被上一帧读取 → 原因：CPU 与 GPU 异步执行 → 处理：双缓冲或分帧更新，避免强制同步
绑定点与状态机缓存
是什么
WebGL 是一个全局状态机，绑定点与开关状态在设置后持续生效，直到被改成别的值。绑定缓存指驱动记录当前各绑定点对应的对象，重复绑定同一对象时可以直接跳过实际切换。
解决什么问题
它解决“为什么同样的代码换顺序就出错”的问题。绘制调用不携带参数，GPU 完全依赖当前状态：使用哪个 program、绑定哪个缓冲、启用哪些顶点属性、深度测试是否开启，任何一项没设置正确都会导致结果异常。
为什么这样做
采用全局状态机而非每次绘制传参，是为了减少 API 调用开销。图形 API 的历史与 GPU 硬件模型都基于状态机设计：驱动只需在状态变化时更新硬件寄存器，未变化时可以跳过。代价是开发者必须自己保证状态与预期一致。
怎么用
JavaScript
// 正确的顺序：绑定 → 设置状态 → 绘制
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.enableVertexAttribArray(aPosition);
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
// 减少状态切换：同状态的图元合并绘制
function drawBatch(items) {
gl.useProgram(currentProgram);
for (const item of items) {
gl.uniformMatrix4fv(uMvp, false, item.matrix); // 只改必要 uniform
gl.drawElements(gl.TRIANGLES, item.count, gl.UNSIGNED_SHORT, item.offset);
}
}
常见坑
- 先绘制后设置状态 → 原因：沿用上一帧残留状态 → 处理：按“绑定、设置、绘制”固定顺序组织
- 每帧重复设置未变化的开关 → 原因：状态设置也需调用开销 → 处理：按状态分组批量绘制，减少切换次数
- 依赖默认状态未显式初始化 → 原因：不同浏览器默认值可能不同 → 处理：初始化阶段显式设置深度、混合、面剔除
- 释放对象后仍被绑定 → 原因：删除不会自动解绑 → 处理：删除前先绑定其他对象或置为 null
要点总结
- 逐帧变化的顶点数据优先用
bufferSubData局部更新 - 动态缓冲用
DYNAMIC_DRAW，静态数据用STATIC_DRAW，标记与实际用法要匹配 - 全量重传时可考虑双缓冲，避免 CPU 写入与 GPU 读取冲突
- WebGL 是全局状态机，状态设置顺序直接影响绘制结果
- 按渲染状态分组批量绘制，是降低状态切换开销的最直接手段
